<template>
    <el-dialog title="通知" :visible.sync="visible" :append-to-body="true" width="80%">
        <el-table :data="certList" style="width: 100%">
          <el-table-column align="center" label="用户信息">
            <el-table-column header-align="center" align="center" type="index" label="序号"/>
            <el-table-column header-align="center" align="center" prop="realname" label="姓名"/>
            <el-table-column header-align="center" align="center" prop="deptName" label="部门"/>
            <el-table-column header-align="center" align="center" prop="craftName" label="岗位/工种"/>
          </el-table-column>
          <el-table-column align="center" label="证件信息">
            <el-table-column header-align="center" align="center" prop="certType" label="证件类型" />
            <el-table-column header-align="center" align="center" prop="certName" label="证件名称"/>
            <el-table-column header-align="center" align="center" prop="certStartTime" label="使用起始时间"/>
            <el-table-column header-align="center" align="center" prop="certEndTime" label="使用截止时间"/>
            <el-table-column header-align="center" align="center" label="操作">
              <template slot-scope="scope">
                <el-button type="text" @click="openCertEditor(scope.row.id)">编辑</el-button>
              </template>
            </el-table-column>
          </el-table-column>
        </el-table>


        <!-- 分页 -->
        <el-pagination
          style="marginTop: 20px"
          @size-change="onPageSizeChange"
          @current-change="loadList"
          :current-page.sync="pageIndex"
          :page-size="pageSize"
          :total="totalCount"
          :page-sizes="[10, 20, 50]"
          layout="total, sizes, prev, pager, next, jumper">
        </el-pagination>

        <div slot="footer" class="dialog-footer">
          <el-button  type="primary" @click="visible = false">关闭</el-button>
        </div>

        <cert-editor ref="certEditor" @refresh="loadList" />
    </el-dialog>
</template>

<script>
  import CertEditor from './modules/user/cert-editor'
  export default {
    components: { CertEditor },
    data () {
      return {
        visible: false,
        certList: [],
        pageIndex: 1,
        pageSize: 10,
        totalCount: 0
      }
    },
    methods: {
      // 初始化
      init () {
        this.visible = true
        this.pageIndex = 1
        this.pageSize = 10
        this.loadList()
      },
      async loadList () {
        let res = await this.$http.post('/usercenter-admin/certConfig/getAlertList', {page: this.pageIndex, limit: this.pageSize})
        this.certList = res.data.list
        this.totalCount = res.data.totalCount
      },
      onPageSizeChange (val) {
        this.pageSize = val
        this.loadList()
      },
      openCertEditor (id) {
        this.$refs.certEditor.open({id})
      }
    }
  }
</script>

